<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建产品</title>
    <link rel="stylesheet" href="${staticPath}/admin/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="${staticPath}/admin/tcsf/tcsf.panel.css"/>
    <link rel="stylesheet" href="${staticPath}/admin/tcsf/tcsf.form.css"/>
    <link rel="stylesheet" href="${staticPath}/admin/tcsf/content.css"/>
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css">

    <link rel="stylesheet" type="text/css" href="${staticPath}/zui/css/zui.css">
    <link rel="stylesheet" type="text/css" href="${staticPath}/zui/lib/uploader/zui.uploader.css">
    <%--select--%>
    <link rel="stylesheet" type="text/css" href="${staticPath}/select/css/bootstrap-drilldown-select.css">
    <%--select--%>
    <%--select2--%>
    <link href="${staticPath}/select2/dist/css/select2.min.css" rel="stylesheet">
    <%--select2--%>
    <script src="${staticPath}/admin/tcsf/jquery.min.js"></script>
    <script type="text/javascript">
        var _ctx = '${ctx}';
        var _staticPath = '${staticPath}';
    </script>
    <script src="${staticPath}/select/js/bootstrap-drilldown-select.js"></script>
    <script src="${staticPath}/admin/tcsf/wg_listToTree1.1.js"></script>
    <script src="${staticPath}/admin/lib/jquery.form/jquery.form.min.js"></script>
    <script src="${staticPath}/admin/lib/jquery.form/jquery.validate.min.js"></script>
    <script src="${staticPath}/admin/lib/jquery.form/jquery.validate.extend.js"></script>
    <script src="${staticPath}/admin/lib/jquery.form/messages_zh.js"></script>
    <script type="text/javascript" src="${staticPath}/admin/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${staticPath}/admin/tcsf/content.js"></script>

    <script src="${staticPath}/zui/js/zui.js" type="text/javascript" charset="utf-8"></script>
    <script src="${staticPath}/zui/lib/uploader/zui.uploader.min.js" type="text/javascript"
            charset="utf-8"></script>

    <%--select2--%>
    <script src="${staticPath}/select2/dist/js/select2.min.js"></script>
    <script src="${staticPath}/select2/dist/js/i18n/zh-CN.js"></script>

    <style type="text/css">
        .edui-default .edui-toolbar .edui-combox-body .edui-button-body {
            width: 70px !important;
        }

        .modal-backdrop {
            opacity: 0 !important;
            filter: alpha(opacity=0) !important;
        }

        .dropdown-menu {
            z-index: 99999999999 !important;
        }

        .select2-selection {
            background-color: #FFF !important;
            border: 1px solid #e5e6e7 !important;
            border-radius: 1px !important;
        }

        .select2-search__field {
            margin-left: 5px;
            margin-top: 0px!important;

        }
    </style>
</head>
<body>

<div class="create-page tpanel">
    <div class="panel-content">
        <div class="container-fluid">

            <form id="createForm" class="form-horizontal">

                <div class="form-group form-group-first">
                    <label for="name" class="col-sm-2 control-label">产品名称</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"
                               id="name" name="name"
                               value=""
                               placeholder="请输入名称(必填)" required
                               minlength="0" maxlength="100"
                        />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">产品分类</label>
                    <div class="col-sm-8 ">
                        <input id="drilldown1" class="form-control" placeholder="请选择分类"
                               data-toggle="dropdown" readonly="readonly">
                        <input id="parentId" class="hidden" name="catalogId">
                    </div>
                </div>

                <div class="form-group">
                    <label for="description" class="col-sm-2 control-label">产品详情</label>
                    <div class="col-sm-8 ">
                        <textarea id="description" class="form-control" type="" name="description"
                                  minlength="0" maxlength="100" placeholder="请输入产品详情"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="keyword" class="col-sm-2 control-label">文章标签</label>
                    <div class="col-sm-8 ">
                        <select class="form-control js-example-tags" multiple="multiple" name="keyword" id="keyword">
                            <c:forEach var="label" items="${labels}">
                                <option>${label.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">介绍图片</label>
                    <div class="col-sm-8">
                        <div id='myUploader'>
                            <div class="uploader-message text-center">
                                <div class="content"></div>
                                <button type="button" class="close">×</button>
                            </div>
                            <div class="uploader-files file-list file-list-grid"></div>
                            <div>
                                <hr class="divider">
                                <div class="uploader-status pull-right text-muted"></div>
                                <button type="button" class="btn btn-link uploader-btn-browse"><i
                                        class="icon icon-plus"></i> 选择文件
                                </button>
                                <button type="button" class="btn btn-link uploader-btn-start"><i
                                        class="icon icon-cloud-upload"></i> 开始上传
                                </button>
                            </div>
                        </div>
                        <input type="text" class="hidden" name="pictures" id="pictures">
                    </div>
                </div>

                <div class="form-group">
                    <label for="isShow" class="col-sm-2 control-label">是否上架</label>
                    <div class="col-sm-8">
                        <input class="myCheckBox" type="checkbox" name="isShow" id="isShow">
                    </div>
                </div>

                <div class="form-group">
                    <label for="isTop" class="col-sm-2 control-label">是否置顶</label>
                    <div class="col-sm-8">
                        <input class="myCheckBox" type="checkbox" name="isTop" id="isTop">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12" style="text-align: center;">
                        <a class="btn btn-default" href="javascript:window.history.back();">返回</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="submit" class="btn btn-primary" value="保存"/>
                    </div>
                </div>

            </form>

        </div>
    </div>
</div>
<script type="text/javascript">
    window.parent.changeTitle('创建产品');
    var content_img = new Array();

    $(function () {
        $.getJSON('${ctx}/admin/cms/production_catalog/list', function (result) {
            if (result.code == 'OK') {
                fillData(result.body);
            }
        });

        $('#myUploader').uploader({
            url: '${ctx}/admin/other/uploderImage?filePath=production',
            filters: {
                mime_types: [
                    {title: '图片', extensions: 'jpg,gif,png'}
                ],
                // 最大上传文件为 1MB
                max_file_size: '3mb',
                // 不允许上传重复文件
                prevent_duplicates: true
            },
            fileTemplate: '<div class="file"><div class="file-progress-bar"></div><div class="file-wrapper"><div class="file-icon"><i class="icon icon-file-o"></i></div><div class="content"><div class="file-name"></div><div class="file-size small text-muted">0KB</div></div><div class="actions"><div class="file-status" data-toggle="tooltip"><i class="icon"></i> <span class="text"></span></div><a data-toggle="tooltip" class="btn btn-link btn-download-file" target="_blank"><i class="icon icon-download-alt"></i></a><button type="button" data-toggle="tooltip" class="btn btn-link btn-reset-file" title="Repeat"><i class="icon icon-repeat"></i></button><button type="button" data-toggle="tooltip" class="btn btn-link btn-rename-file" title="Rename"><i class="icon icon-pencil"></i></button><button type="button" data-toggle="tooltip" title="Remove" class="btn btn-link btn-delete-file"><i class="icon icon-trash text-danger"></i></button></div></div></div>',
            responseHandler: function (responseObject, file) {
                var object = eval('(' + responseObject.response + ')');
                content_img.push(object.response);
                $('#pictures').val(content_img.toString());
            },
        });

        $('#myUploader').uploader().on('onFilesAdded', function (file) {
            window.parent.layer.msg('选择完图片，请记得点击开始上传', {icon: 1});
        });

        $(".js-example-tags").select2({
            language: 'zh-CN',
            placeholder: '请选择产品标签'
        });

        $('.select2-search__field').addClass("form-control");

        initForm('#createForm', '${ctx}/admin/cms/production/create', function (r) {
            var resp = $.parseJSON(r);
            if (resp.code == 'OK') {
                topLayer.msg('保存成功', {icon: 1});
                //询问框

                window.parent.layer.confirm('是否要设置产品参数？', {
                    btn: ['是', '否'] //按钮
                }, function () {
                    changeUrl('${ctx}/admin/cms/production/parameter?id=' + resp.body);
                    window.parent.layer.closeAll();
                }, function () {
                    changeUrl('${ctx}/admin/cms/production');
                });

            } else {
                topLayer.msg(resp.message, {icon: 2});
            }
        });

    });

    function fillData(data) {
        var param = {
            list: data,
            inParams: {
                pid: "parentId",
                rootId: null,
                id: 'id',
                name: 'catalogName',
            },
            outParams: {
                children: "list",
                pid: "pid",
                id: 'id',
                name: 'catalogName',
            },
            sort: {
                orderBy: ["sort"],
                sort: "asc"
            }
        };
        var tree = wg_listToTree(param);
        if (tree.length == 0) {
            tree = [{
                id: -1,
                catalogName: "没有分类，去创建一个吧",
            }]
        }
        $('#drilldown1').drilldownSelect({
            appendValue: false,
            data: tree,
            valueName: 'catalogName',
            onSelected: function (event) {
                if ($(event.target).data('id') === -1) {
                    window.location.href = '${ctx}/admin/cms/production_catalog';
                }
                $('#parentId').val($(event.target).data('id'));
                $('#drilldown1').val(event.target.innerHTML);
            }
        });
    }
</script>
</body>
</html>
